<template>
  <div>

      <div class="content">
        <img :src="orderItem.thumb_url" class="content-cover"></img>
        <div class="content-center">
          <h2 class="content-title">
            {{orderItem.goods_name}}
          </h2>
          <p class="content-desc">
            {{orderItem.goods_attr_str}}
          </p>
          <p>
            <span class="content-price">{{ orderItem.currency_symbol }}{{orderItem.real_price}}</span>
            <span class="content-quantity">{{'x'+orderItem.goods_num}}</span>
          </p>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  name:'OrderDetailItem',
  props:{
    orderItem:{
      type:Object,
      required:true,
      default:()=>{}
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "@/common/style/common.scss";

.content{
  padding:20px;
  @include flex();
  &-cover{
    width:80px;
    height: 80px;
    border-radius: 4px;
  }
  &-center{
    margin-left:10px;
  }
  &-title{
    color:#333;
    font-weight: 500;
    font-size: 16px;
  }
  &-desc{
    margin:10px 0;
    font-size: 12px;
    color:#999
  }
  &-price{
    margin-right: 20px;
    font-size: 16px;
    color:#e2231a
  }
}
</style>
